{include file="common/mainHead"/}
 <script type="text/javascript" src="__STATIC__/js/jquery.2.1.1.min.js"></script>
    

  <link rel="stylesheet" type="text/css" href="__STATIC__/js/style.css" />




<div class="admin-main fadeInUp animated" ng-app="hd" ng-controller="ctrl">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>{$data.title}</legend>
    </fieldset>
    <form class="layui-form layui-form-pane" action="{:url('addshuxing')}" method="post" id="form1">
    	
        
       
       
   
        <input type="hidden" name="id" value="{$data.id}" />
        
          <div class="layui-form-item control-group">
            <label class="layui-form-label">商品规格</label>
            <div class="layui-input-4">
                <label  id="add_lv1"  class="layui-btn">添加规格</label>
                 <label  id="update_table"  class="layui-btn">刷新表</label>
            </div>

        </div>
        
   
        
        
        {volist name="shuxing" id="v"}
      <div class="control-group lv1 layui-form-item " style="margin-bottom:30px"> 
                    <label class="control-label layui-form-label">规格名称</label>
                    <div class="controls">
                        <input type="text" class="layui-form-label" name="lv1[]"  value="{$v.shuxing}" placeholder="规格名称">
                        <button class="btn btn-primary add_lv2 layui-btn" type="button">添加</button>
                        <button class="btn btn-danger remove_lv1 layui-btn layui-btn-danger" type="button">删除</button>
                    </div>
                    <div class="controls lv2s">
                    {volist name="v.child" id="c"}
                   
                   	<div style="margin: 5px;display:inline-block">
                   		<input type="text" class="layui-form-label"  value="{$c}" data-s="lv2" placeholder="参数名称">
                   		<button class="btn btn-danger remove_lv2 layui-btn layui-btn-danger " type="button">删除</button>
                   	</div>
                  
                   {/volist}
                    </div>
     </div> 
     
     
     
     
     
     
       {/volist} 
        
        
        
        
        
        
        
        
        
        
        
        
        
        
         <div id="lv_table_con" class="control-group" >

    <div class="controls" >
        <div id="lv_table" style="padding: 10px 0px;" class="layui-field-box table-responsive">
            
            
          <table class="table table-bordered layui-table table-hover">   
          	<thead>  
          		<tr>
          		{volist name="shuxing" id="v"}
          		<th width="50">{$v.shuxing}</th>  
          			{/volist}
          		<th width="20">现价</th>          
          		<th width="20">原价</th>       
          	</tr>    
          	</thead> 
          	<tbody>
          		{volist name="htmls" id="v"}
          		{$v}
          		{/volist}
          	</tbody>
          </table>  
            
            
            
            
            
        </div>
    </div>
</div>
        
      

        
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" >{:lang('submit')}</button>
                <a href="{:url('index')}" class="layui-btn layui-btn-primary">{:lang('back')}</a>
            </div>
        </div>
       
    </form>
</div>
{include file="common/mainFoot"/}


  <link rel="stylesheet" type="text/css" href="__STATIC__/js/style.css" />
  
  <script>
  	  var lv1HTML = '<div class="control-group lv1 layui-form-item " style="margin-bottom:30px">' +
                    '<label class="control-label layui-form-label">规格名称</label>' +
                    '<div class="controls">' +
                        '<input type="text" class="layui-form-label" name="lv1[]" placeholder="规格名称">' +
                        '<button class="btn btn-primary add_lv2 layui-btn" type="button">添加</button>' +
                        '<button class="btn btn-danger remove_lv1 layui-btn layui-btn-danger" type="button">删除</button>' +
                    '</div>' +
                    '<div class="controls lv2s"></div>' +
                '</div>';
    
    var lv2HTML = '<div style="margin: 5px;display:inline-block">' +
                    '<input type="text" class="layui-form-label" data-s="lv2" placeholder="参数名称">' +
                    '<button  class="btn btn-danger remove_lv2 layui-btn layui-btn-danger " type="button">删除</button>' +
                '</div>';

 
    $(document).ready(function() {

    	
    	
        $('#add_lv1').on('click', function() {
            var last = $('.control-group.lv1:last');
            if (!last || last.length == 0) {
                $(this).parents('.control-group').eq(0).after(lv1HTML);
            } else {
                last.after(lv1HTML);
            }
        });

        $(document).on('click', '.remove_lv1', function() {
            $(this).parents('.lv1').remove();
        });

        $(document).on('click', '.add_lv2', function() {
            $(this).parents('.lv1').find('.lv2s').append(lv2HTML);
        });

        $(document).on('click', '.remove_lv2', function() {
            $(this).parent().remove();
        });

        $('#update_table').on('click', function() {
            var lv1Arr = $('input[name="lv1[]"]');
            if (!lv1Arr || lv1Arr.length == 0) {
                $('#lv_table_con').hide();
                $('#lv_table').html('');
                return;
            }
            for (var i = 0; i < lv1Arr.length; i++) {
                var lv2Arr = $(lv1Arr[i]).parents('.lv1').find('input[data-s="lv2"]');
                if (!lv2Arr || lv2Arr.length == 0) {
                    alert('请先删除无参数的规格项！');
                    return;
                }
            }

            var tableHTML = '';
            tableHTML += '<table class="table table-bordered layui-table table-hover">';
            tableHTML += '    <thead>';
            tableHTML += '        <tr>';
            
   
         
            for (var i = 0; i < lv1Arr.length; i++) {
                tableHTML += '<th width="50">' + $(lv1Arr[i]).val() + '</th>';
              
        
         
                
            }
            
         
            
            tableHTML += '            <th width="20">现价</th>';
            tableHTML += '            <th width="20">原价</th>';
            tableHTML += '        </tr>';
            tableHTML += '    </thead>';
            tableHTML += '    <tbody>';
             
            var numsArr = new Array();
            var idxArr = new Array();
            for (var i = 0; i < lv1Arr.length; i++) {
                numsArr.push($(lv1Arr[i]).parents('.lv1').find('input[data-s="lv2"]').length);
                idxArr[i] = 0;
            }
             
            var len = 1;
            var rowsArr = new Array();
            for (var i = 0; i < numsArr.length; i++) {
                len = len * numsArr[i];
                 
                var tmpnum = 1;
                for (var j = numsArr.length - 1; j > i; j--) {
                    tmpnum = tmpnum * numsArr[j];
                }
                rowsArr.push(tmpnum);
            }
            
    
        
        
    
       
            for (var i = 0; i < len; i++) {
                tableHTML += '<tr data-row="' + (i+1) + '">';
         
                var name = '';
                for (var j = 0; j < lv1Arr.length; j++) {
                    var n = parseInt(i / rowsArr[j]);
                    if (j == 0) {
                    } else if (j == lv1Arr.length - 1) {
                        n = idxArr[j];
                        if (idxArr[j] + 1 >= numsArr[j]) {
                            idxArr[j] = 0;
                        } else {
                            idxArr[j]++;
                        }
                    } else {
                        var m = parseInt(i / rowsArr[j]);
                        n = m % numsArr[j];
                    }
                     
                    var text = $(lv1Arr[j]).parents('.lv1').find('input[data-s="lv2"]').eq(n).val();
                   console.log(text)
                   if (j != lv1Arr.length - 1) {
                    	
                        name += text + ':';
                    } else {
                        name += text;
                    }
                       
               console.log(name)
//                   if (i % rowsArr[j] == 0) {
                        tableHTML += '<td width="50" >' + text + '</td>';
//                  }
              
                }
            
                 
           
                tableHTML += '<td width="20"><input type="text" name="' + name + '[price]" /></td>';
                tableHTML += '<td width="20"><input type="text" name="' + name + '[original_price]" /></td>';
                tableHTML += '</tr>';
            }
            tableHTML += '</tbody>';
            tableHTML += '</table>';
           
            $('#lv_table_con').show();
            $('#lv_table').html(tableHTML);
        });
    });
  	
  </script>
  
  
